<template>
	<view class="head">
		<view class="back" @click="goBack">
			<image src="@/static/public/arrow_left_000000.png" mode="heightFix"></image>
		</view>
		<view class="title">{{title}}</view>
		<view class="verify">
			<view class="text" @click="verify">确认</view>
		</view>
	</view>
	<view class="content" v-if="argument=='name'">
		<view class="input">
			<up-input placeholder="请输入昵称" border="none" v-model="user.name" maxlength="16" fontSize="30rpx"
				style="width: 600rpx;"></up-input>
			<view class="text">{{user.name.length}}/16</view>
		</view>
		<view class="tap">一个好的昵称能让你的好友更容易记住你！</view>
	</view>
	<view class="content" v-else-if="argument=='intro'">
		<view class="input">
			<up-input placeholder="请输入签名" border="none" v-model="user.intro" maxlength="20" fontSize="30rpx"
				style="width: 600rpx;"></up-input>
			<view class="text">{{user.intro.length}}/20</view>
		</view>
		<view class="tap">签名是展现您个性与风格的绝佳方式！</view>
	</view>
	<view class="content" v-else-if="argument=='account'">
		<view class="input">
			<up-input placeholder="请输入账号" border="none" v-model="user.account" maxlength="20" fontSize="30rpx"
				style="width: 600rpx;"></up-input>
			<view class="text">{{user.account.length}}/20</view>
		</view>
		<view class="tap">建议避免使用包含姓名、生日等个人隐私的信息，账号长度为6至20位，仅允许包含数字、字母、加减号、下划线和点。</view>
	</view>
	<up-loading-page bg-color="#e8e8e8" :loading="loading"></up-loading-page>
</template>
<script setup>
	import { onLoad } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	import api from "@/utlis/api.js";

	const title = ref("");
	const argument = ref();
	const loading = ref(false);

	const user = ref("");
	const retentionUser = ref()
	const goBack = () => {
		uni.navigateBack({
			delta: 1
		});
	}
	const verify = () => {
		let data = {}
		switch (argument.value) {
			case 'name':
				if (user.value.name.length == 0) {
					uni.showToast({
						title: "昵称不能为空",
						icon: 'none',
						duration: 1000,
					});
					return;
				}
				if (user.value.name == uni.$store.state.user.name) {
					uni.showToast({
						title: "昵称跟原有昵称相同",
						icon: 'none',
						duration: 1000,
					});
					return;
				}
				data.name = user.value.name;
				break;
			case 'intro':
				if (user.value.intro.length == 0) {
					uni.showToast({
						title: "签名不能为空",
						icon: 'none',
						duration: 1000,
					});
					return;
				}
				if (user.value.intro == uni.$store.state.user.intro) {
					uni.showToast({
						title: "签名跟原有签名相同",
						icon: 'none',
						duration: 1000,
					});
					return;
				}
				data.intro = user.value.intro;
				break;
		}
		loading.value = true;

		api("app/user/userBase/", "PUT", data).then(res => {
			loading.value = false;
			if (res.code == 200) {
				uni.$store.commit("setUser", user.value)
				goBack();
			} else {
				uni.showToast({
					title: "修改失败",
					icon: 'none',
					duration: 1000,
				});
			}
		}).catch(err => {
			loading.value = false;
		});
	}

	onLoad((options) => {
		user.value = JSON.parse(JSON.stringify(uni.$store.state.user));
		argument.value = options.argument;
		switch (argument.value) {
			case 'name':
				title.value = "更改昵称";
				break;
			case 'intro':
				title.value = "更改签名";
				break;
		}

	});
</script>

<style lang="scss">
	.head {
		padding: 85rpx 30rpx 30rpx 30rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;

		image {
			height: 35rpx;
		}

		.back,
		.verify {
			width: 100rpx;
		}

		.text {
			text-align: center;
			line-height: 60rpx;
			border-radius: 10rpx;
		}

		.title {
			width: 490rpx;
			text-align: center;
		}

		.verify .text {
			background-color: #C0F04B;
			font-size: 30rpx;
		}
	}

	.content {
		margin: 0 30rpx;

		.input {
			height: 80rpx;
			display: flex;
			flex-wrap: wrap;
			border-bottom: 1px solid #000000;

			.text {
				width: 90rpx;
				line-height: 80rpx;
				text-align: right;
				font-size: 27rpx;
				color: #9A9A9A;
			}
		}

		.tap {
			margin-top: 30rpx;
			font-size: 27rpx;
			color: #9A9A9A;
		}
	}
</style>